<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h2>vue3的生命周期 - {{ count }}</h2>
      <button @click="count++">btn</button>
      <!-- <ul>
        <li v-for="item in list" :key="item._id">{{ item.title }}</li>
      </ul> -->
    </div>

    <script src="./lib/vue3.js"></script>
    <script>
      const { createApp } = Vue;

      // 8个生命周期函数
      // 生命周期写的位置就是写选项的位置
      // 只有创建阶段和挂载阶段的生命周期会自动执行
      createApp({
        data() {
          return {
            count: 10,
            list: [],
          };
        },
        methods: {
          fn() {},
        },
        // template的作用相当于innerHTML
        // template: "<div>123</div>",
        // 1. 创建阶段
        beforeCreate() {
          // 不能再beforeCreate里面请求数据
          // 因为这里还拿不到数据
          console.log("beforeCreate", this.count, this.fn);
        },

        // vue自己去初始化了data和methods

        created() {
          console.log("created", this.count, this.fn);
          // fetch是h5自带的一种请求方式,浏览器自带的
          // fetch("http://www.pudge.wang:3080/api/rated/list")
          //   .then((response) => response.json())
          //   .then((res) => {
          //     this.list = res.result;
          //   });
        },

        // vue自己去检查了el选项和template选项

        // 2. 挂载阶段
        beforeMount() {
          console.log("beforeMount", document.querySelector("#app").innerHTML);
        },

        // vue将内容挂载到了页面上

        mounted() {
          // 只有在这里可以获取到页面上面的内容
          console.log("mounted", document.querySelector("#app").innerHTML);
        },

        // 3. 更新阶段
        // 不会自动执行，只有当页面的data(响应式数据)发生改变的时候才会触发
        // 更新前和更新后不是数据改变的前后
        // 页面重新渲染的前后

        // 数据的改变和页面的更新不是一起发生的
        beforeUpdate() {
          console.log(
            "beforeUpdate",
            this.count,
            document.querySelector("h2").innerHTML
          );
          // this.count++;
        },
        // 在updated不要去修改数据，会造成死循环
        updated() {
          console.log(
            "updated",
            this.count,
            document.querySelector("h2").innerHTML
          );
          // this.count++;
        },

        // 4.卸载阶段
        beforeUnmount() {
          // 关闭定时器，WebSocket长连接，js的事件监听，图表和地图等第三方插件
          console.log("beforeUnmount");
        },
        unmounted() {
          console.log("unmounted");
        },
      }).mount("#app");
    </script>
  </body>
</html>
